<template>
    <div>
        <h1>前台系统餐桌状态页面</h1>
        <div id="buttons">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <diySelect></diySelect>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
        </div>
        <div>
            <el-table
                    :header-cell-style="this.$store.state.headerCssObj"
                    :cell-style="this.$store.state.cellCssObj"
                    :data="currentData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="餐桌id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="可容纳人数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="location"
                        label="位置">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="operate"
                        label="操作">
                    <el-button  @click="dialogVisible = true" size="mini">修改</el-button>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="修改餐桌状态"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <div>
                <div id="table">
                    <span>餐桌id:</span><span>01</span>
                </div>
                <div id="state">
                    <span>状态:</span><span><diySelect style="width: 150px;height: 15px"></diySelect></span>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
        <div class="pages">
            <paging :obj = 'pagingData'></paging>
        </div>
    </div>
</template>

<script>
    import diySelect from "../../components/publicCom/diySelect";
    import paging from "../../components/publicCom/paging";
    export default {
        name: "tableStatePage",
        components:{
            diySelect,
            paging
        },
        data(){
            return {
                tableData:[
                    {
                        id: '1',
                        name: '王小虎',
                        location: '二楼3号',
                        state:'空',
                    }, {
                        id: '2',
                        name: '王小虎',
                        location: '二楼3号',
                        state:'空',
                    }, {
                        id: '3',
                        name: '王小虎',
                        location: '二楼3号',
                        state:'空',
                    }, {
                        id: '4',
                        name: '王小虎',
                        location: '二楼3号',
                        state:'空',
                },
                    {
                        id: '5',
                        name: '王小虎',
                        location: '二楼3号',
                        state:'空',
                    },{
                        id: '6',
                        name: '王小虎',
                        location: '二楼3号',
                        state:'空',
                    },{
                        id: '7',
                        name: '王小虎',
                        location: '二楼3号',
                        state:'空',
                    }],
                currentData:[],
                dialogVisible: false
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

        },
        computed:{
                pagingData(){
                    var that = this;
                    let data = {
                     pageSize:5,//一页展示几条数据
                     pageCount:5,//超过多少页打点省略
                        total: 7,//一共有几条数据
                   currentChange(num){
                       that.currentPage = num//改变当前页
                   },

       };
        return data
      },

    },
        created() {
            this.tableData.forEach((item,index)=>{
                if (index<5)this.currentData.push(item)
            })
        }
    }
</script>

<style scoped lang="less">
.el-input{
    width: 150px;
    height: 30px;
    margin-left: -458px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.el-button{
       background-color: #409EFF;
    color: white;
    }
#buttons{
        padding-bottom: 30px;
        padding-top: 10px;
    }
#table{
        span:nth-child(1){
            width: 96px;
            height: 30px;
            display: inline-block;
        }
        span:nth-child(2){
            width: 150px;
            height: 30px;
            display: inline-block;
        }

    }
#state{
    span:nth-child(1){
        width: 96px;
        height: 30px;
        display: inline-block;
    }
    span:nth-child(2){
        width: 150px;
        height: 30px;
        display: inline-block;
    }

}
.pages{
    padding:30px 0;
}
</style>